<template>
  <div class="home">
    <!-- 轮播 -->
    <swiperLoop :list="bnrList" v-if="bnrList.length>0">
      <template v-slot:default="slot">
        <a :href="slot.item.url"><img :src="slot.item.src"></a>
      </template>
    </swiperLoop>

    <!-- 广播滚动 -->
    <div class="radio" flex="cross:center">
      <img src="../img/1-400x300.jpg">
      <swiperLoop :auto="true" :list="textList" direction="vertical" v-if="textList.length>0">
        <template v-slot:default="slot">
          <a :href="slot.item.url">{{slot.item.text}}</a>
        </template>
      </swiperLoop>
    </div>

    <!-- 邀请有礼 -->
    <ul class="three-list" flex="box:mean">
      <li>
        <router-link to="/invite">
          <img :src="$src+'pro_three1.png'">
          <p>邀请有礼</p>
        </router-link>
      </li>
      <li>
        <router-link to="/code">
          <img :src="$src+'pro_three2.png'">
          <p>二维码分享</p>
        </router-link>
      </li>
      <li>
        <router-link to="/layer">
          <img :src="$src+'pro_three3.png'">
          <p>layer组件</p>
        </router-link>
      </li>
    </ul>

    <!-- 滑块 -->
    <slider :value="value" :max="2000" :min="0" :step="200" style="margin:20px auto"></slider>

    <ul class="three-list" flex="box:mean">
      <li>
        <router-link to="/picker">
          <img :src="$src+'pro_three1.png'">
          <p>级联选择器</p>
        </router-link>
      </li>
      <li>
        <router-link to="/drag">
          <img :src="$src+'pro_three2.png'">
          <p>拖动排序</p>
        </router-link>
      </li>
      <li>
        <router-link to="/table">
          <img :src="$src+'pro_three3.png'">
          <p>table组件</p>
        </router-link>
      </li>
    </ul>
    <!-- 底部 -->
    <foot :active="0"></foot>
  </div>
</template>

<script>
  import SwiperLoop from '@/components/SwiperLoop.vue'
  import Slider from '@/components/Slider.vue'
  import { getSwiper } from '@/api/api'

  export default {
    name: 'home',
    data(){
    	return{
    		bnrList:[],
			textList:[],
			value:300
    	}
    },
    components: {
		SwiperLoop,
		Slider
    },
    methods:{
		// 请求轮播
		async getSwiper(){
		// let jsonData={data:{"orgId":"UA","messageType":"1","status":"1"},timestamp:'',sign:""}
		// let bnrList=[],regex=/http:\/\/120.76.0.161\/web/,
		// res=await getSwiper(jsonData)
		// console.log(res)
		this.bnrList = [
			{src:require('../img/33-400x300.jpg'),url:''},
			{src:require('../img/1-400x300.jpg'),url:''},
			{src:require('../img/22-400x300.jpg'),url:''},
			{src:require('../img/33-400x300.jpg'),url:''},
			{src:require('../img/1-400x300.jpg'),url:''}
		]
      }
    },
    mounted(){
		this.getSwiper()
		this.textList=[
			{url:'http://www.baidu.com',text:'邀请好友来贷款'},
			{url:'#',text:'推荐好友拿现金，三重好礼等你来！'},
			{url:'http://www.baidu.com',text:'邀请好友来贷款'},
			{url:'#',text:'推荐好友拿现金，三重好礼等你来！'}
		]
    }
  }
</script>

<style lang="less" scoped>
.home{
    height: 100%;
    background: #f0f9fd;
    font-size: 15px;
	.radio,.three-list{
		background: #fff;
	}
	@height:20px;
	.radio{
		height:@height;
		padding: 0.27rem 0.3rem;
		border-bottom: 1px solid #d3d3d3;
		img{
			height: 0.5rem;
			margin-right: 0.3rem;
		}
		.swiper{
			line-height: @height;
		}
	}
	.three-list{
		text-align: center;
		padding: 0.3rem 0;
		li{
			img{
				width: 1.28rem;
				height: 1.28rem;
			}
			p{
				margin-top: 0.2rem;
			}
		}
	}
}
</style>